<template>
	<view class="login-page">
		<view class="content">
			<view class="title">账号注册</view>
			<view class="item animate__fadeInDown" style="animation-duration: 2s;">
				<image class="my-icon" src="../../static/img/login/SVG.svg" mode="scaleToFill" />
				<input class="my-input" placeholder="请输入手机号" type="number" v-model="userName" @input="filterInput" />
			</view>
			<view class="item animate__fadeInDown" style="animation-duration: 2s;">
				<image class="my-icon" src="../../static/img/login/so.svg" mode="scaleToFill" />
				<input class="my-input" placeholder="请输入登录密码" :type="see1 ? 'text' : 'password'" v-model="loginPwd" />

				<image class="my-icon-c" src="../../static/img/login/yan.svg" mode="scaleToFill"
					@click="see1 = !see1" />
			</view>

			<view class="item animate__fadeInDown" style="animation-duration: 2s;">
				<image class="my-icon" src="../../static/img/login/so.svg" mode="scaleToFill" />

				<input class="my-input" placeholder="请确认登录密码" :type="see2 ? 'text' : 'password'" v-model="confirmPwd" />

				<image class="my-icon-c" src="../../static/img/login/yan.svg" mode="scaleToFill"
					@click="see2 = !see2" />
			</view>

			<view class="item animate__fadeInDown" style="animation-duration: 2s;">
				<image class="my-icon" src="../../static/img/login/dun.svg" mode="scaleToFill" />

				<input class="my-input" placeholder="请输入支付密码" :type="see3 ? 'text' : 'password'" v-model="payPwd" />

				<image class="my-icon-c" src="../../static/img/login/yan.svg" mode="scaleToFill"
					@click="see3 = !see3" />
			</view>

			<view class="item animate__fadeInDown" style="animation-duration: 2s;">
				<image class="my-icon" src="../../static/img/login/dun.svg" mode="scaleToFill" />

				<input class="my-input" placeholder="请确认支付密码" :type="see4 ? 'text' : 'password'"
					v-model="confirmPayPwd" />

				<image class="my-icon-c" src="../../static/img/login/yan.svg" mode="scaleToFill"
					@click="see4 = !see4" />
			</view>

			<view class="item animate__fadeInDown" style="animation-duration: 2s;">
				<image class="my-icon-c" src="../../static/img/login/jia.svg" mode="scaleToFill" />

				<input class="my-input" placeholder="请输入邀请码" type="number" v-model="inviteCode" />
			</view>

			<view style="font-size: 26rpx; color: #000; margin-top: 36rpx;display: flex;align-items: center;">
				<image style="width: 35rpx;height: 35rpx;margin-right: 12rpx" v-if="ischeckbox"
					src='../../static/img/select-true.png' mode="" @click="checkboxSelect(ischeckbox)"></image>
				<image style="width: 35rpx;height: 35rpx;margin-right: 12rpx" v-else
					src='../../static/img/select-false.png' mode="" @click="checkboxSelect(ischeckbox)"></image>
				<text @click="checkboxSelect(ischeckbox)">我已阅读并同意 </text>

				<text style="color: #fcd34d" @click="staticContentPage('用户协议')">《用户协议》</text>

				<text>与</text>

				<text style="color: #fcd34d" @click="staticContentPage('隐私条款')">《隐私政策》</text>
			</view>

			<view class="btn animate__fadeInDown" :disabled="isClick" :style="{opacity: isClick ? 1 : 0.5}" @click="register" style="animation-duration: 2s;">立即注册</view>
			
			<view class="foot-login">
				已有账号？
				<text style="color: #fcd34d" @click="loginPage">返回登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appInfo: '',
				userName: '',
				loginPwd: '',
				confirmPwd: '',
				payPwd: '',
				confirmPayPwd: '',
				inviteCode: '',
				ischeckbox: false,
				smsCodeTips: '',
				seconds: 60,
				see1: false,
				see2: false,
				see3: false,
				see4: false
			}
		},
		onLoad(option) {
			this.getAppInfo();
		},
		computed: {
			isClick() {
				return this.userName && this.loginPwd && this.confirmPwd && this.payPwd && this.confirmPayPwd && this
					.inviteCode && this.ischeckbox
			}
		},
		methods: {
			filterInput() {
				this.userName = this.userName.replace(/[^a-zA-Z0-9]/g, '');
			},
			loginPage() {
				uni.navigateTo({
					url: '../login/login'
				});
			},
			
			staticContentPage(title) {
				uni.navigateTo({
					url: '../staticContent/staticContent?title=' + title
				});
			},

			codeChange(text) {
				this.smsCodeTips = text;
			},

			getSmsCode() {
				var that = this;
				if (!that.$refs.code.canGetCode) {
					return;
				}
				if (that.userName === null || that.userName === "") {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					});
					return;
				}
				if (that.userName.length != 11) {
					uni.showToast({
						title: "请输入11位手机号",
						icon: "none"
					});
					return;
				}
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				});
				uni.$uv.http.get('/sendRegisterVerificationCode', {
					params: {
						mobile: that.userName
					}
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: "验证码已发送",
						icon: "none"
					});
					that.$refs.code.start();
				});
			},

			getAppInfo() {
				var that = this;
				uni.$uv.http.get('/setting/getAppInfo').then(res => {
					that.appInfo = res.data;
				});
			},
			checkboxSelect(e) {
				this.ischeckbox = !e
			},
			register() {
				var that = this;
				if (!that.ischeckbox) {
					uni.showToast({
						title: "请勾选我已阅读同意",
						icon: "none"
					});
					return;
				}
				if (that.userName === null || that.userName === "") {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					});
					return;
				}
				if (that.userName.length != 11) {
					uni.showToast({
						title: "请输入11位手机号",
						icon: "none"
					});
					return;
				}
				if (that.loginPwd === null || that.loginPwd === "") {
					uni.showToast({
						title: "请输入密码",
						icon: "none"
					});
					return;
				}
				if (that.confirmPwd == null || that.confirmPwd == '') {
					uni.showToast({
						title: "请再次输入密码",
						icon: "none"
					});
					return;
				}
				if (that.loginPwd != that.confirmPwd) {
					uni.showToast({
						title: "密码不一致",
						icon: "none"
					});
					return;
				}
				if(that.loginPwd.length > 16 || that.confirmPwd.length > 16 || that.confirmPayPwd.length > 16 || that.payPwd.length > 16){
					uni.showToast({
						title: "密码小于16位",
						icon: "none"
					});
					return;
				}
				if (that.payPwd === null || that.payPwd === "") {
					uni.showToast({
						title: "请输入支付密码",
						icon: "none"
					});
					return;
				}
				if (that.confirmPayPwd == null || that.confirmPayPwd == '') {
					uni.showToast({
						title: "请再次输入支付密码",
						icon: "none"
					});
					return;
				}
				if (that.payPwd != that.confirmPayPwd) {
					uni.showToast({
						title: "支付密码不一致",
						icon: "none"
					});
					return;
				}
				if (that.inviteCode == null || that.inviteCode == '') {
					uni.showToast({
						title: "请输入邀请码",
						icon: "none"
					});
					return;
				}
				if (!that.ischeckbox) {
					uni.showToast({
						title: "请同意隐私协议",
						icon: "none"
					});
					return;
				}
				uni.$uv.http.post('/register', {
					userName: that.userName,
					loginPwd: that.loginPwd,
					payPwd: that.payPwd,
					inviteCode: that.inviteCode,
				}).then(res => {
					var secretKey = res.data;
					that.login(secretKey);
				});
			},

			login(secretKey) {
				var that = this;
				uni.$uv.http.post('/login', {
					loginWay:1,
					userName: that.userName,
					loginPwd: that.loginPwd,
					secretKey:secretKey
				}).then(res => {
					var tokenInfo = res.data;
					uni.setStorageSync('tokenName', tokenInfo.tokenName);
					uni.setStorageSync('tokenValue', tokenInfo.tokenValue);
					uni.showToast({
						icon: 'success',
						title: '注册成功!',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.reLaunch({
									url: "../home/home?secretKey=" + secretKey
								});
							}, 2000);
						}
					});
				});
			},

		}
	}
</script>

<style scoped lang="less">

	.foot-login {
		text-align: center;
		font-size: 24rpx;
		z-index: 0;
		color: #9CA3AF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 32rpx;
	}
	.login-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		background: #FFF;
	}

	.title {
		font-size: 42rpx;
		line-height: 56rpx;
		text-align: center;
		letter-spacing: 0px;
		color: #fcd34d;
	}

	.content {
		position: absolute;
		left: 28rpx;
		top: 112rpx;
		width: 696rpx;
		/* 自动布局 */
		display: flex;
		flex-direction: column;
		padding: 56rpx;
		gap: 0rpx 20rpx;
		flex-wrap: wrap;
		align-content: flex-start;
		z-index: 1;
		border-radius: 28rpx;
		opacity: 1;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)),
			rgba(255, 255, 255, 0.05);
		box-sizing: border-box;
		border: 2rpx solid #EDF2FA;
		backdrop-filter: blur(24rpx);
	}

	.item {
		width: 100%;
		height: 88rpx;
		margin-top: 42rpx;
		display: flex;
		align-items: center; // background: red;
		border-radius: 44rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		background: #EDF2FA;
	}

	.my-icon {
		width: 21rpx;
		height: 28rpx;
	}

	.my-icon-c {
		width: 35rpx;
		height: 28rpx;
	}

	.my-input {
		margin-left: 30rpx;
		flex: 1;
		color: #000;
	}

	.btn {
		color: #fff;
		width: 100%;
		height: 91rpx;
		margin-top: 86rpx;
		border-radius: 45rpx;
		line-height: 91rpx;
		text-align: center;
		font-size: 30rpx;
		opacity: 0.5;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
			linear-gradient(90deg, #fcd34d 0%, #3b82f6 100%);
	}
</style>